<template>
	<view class="repair-wrap">
		<!-- 装修记录 -->
		<view class="nav_item" style="padding-top: 20rpx;">
			<view v-if="tableData.length == 0">
				<view style="width: 232px;height: 242px;margin: 110px auto;">
					<image style="width: 100%;height: 100%;"
						src="https://clhy-img.oss-cn-beijing.aliyuncs.com/2023-04-07_image/9015d0e9f45344c4007d408cd271f6a.png" mode=""></image>
				</view>
				<view style="width: 62%;margin: -66px auto;text-align: center;color: #999;">暂无装修记录</view>
			</view>
			
			<view style="padding:5px 10px" class="" v-for="(item,index) in tableData"
				@click="navTo('/privateMsg/renovation/renovationdetails2',item)">
				<view class="repair-box u-p-40 u-p-l-30 u-p-r-30 rounded-2 shadow">
					<view style="display: flex;">
						<view style="font-size: 25px;color: #427705;">{{ tableData.length - index}}、</view>
						<view style="width: 276px;font-weight: 700;font-size: 18px;margin-top: 12px;">
							{{item.update_time.substr(0,10)}}的装修记录
						</view>

					</view>
					<view style="float: right;margin-top: -30px;">
						<view
							style="color: #ffffff;background: #F9A832;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==1">待审批</view>
						<view
							style="color: #ffffff;background:#5599FF;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==2 ">
							业主审批
						</view>

						<view v-if="item.renovate_state ==9 ">
							<view v-if="item.currentRenovationStatus==2"
								style="color: #ffffff;background:#5599FF;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx">
								装修开始
							</view>
							<view v-if="item.currentRenovationStatus==1"
								style="color: #ffffff;background:#999;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx">
								装修未开始
							</view>

						</view>

						<view
							style="color: #ffffff;background:#AA0000;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==3 || item.renovate_state ==11">
							{{item.renovate_state ==3?"未通过":"申请未通过"}}
						</view>
						<view
							style="color: #ffffff;background: #55AA00;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==4">待退款</view>
						<view
							style="color: #ffffff;background:#CC6600;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==5">待验收</view>
						<view
							style="color: #ffffff;background:#0088A8;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==6">待确认</view>
						<view
							style="color: #ffffff;background:#999;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==7">已退款</view>
						<view
							style="color: #ffffff;background:green;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==8">待审核</view>

						<view
							style="color: #ffffff;background:#F9A832;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==10">待验收</view>

						<view
							style="color: #ffffff;background:#F9A832;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==17">待财务计算</view>
						<view
							style="color: #ffffff;background:#F9A832;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==16">待员工检验</view>
						<view
							style="color: #ffffff;background:#F9A832;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==12">申请验收</view>
						<view
							style="color: #ffffff;background:#999;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==20">申请取消</view>

						<view
							style="color: #ffffff;background:#F9A832;padding: 10rpx 20rpx;text-align: center;border-bottom-right-radius:20rpx;border-top-left-radius:20rpx"
							v-if="item.renovate_state ==13">
							{{item.approval_status==0?" 业主审批 ":"退款待确认"}}
						</view>


					</view>
					<view style="display: flex;margin-top: 15px;color: #999999">
						装修周期：
						<text style="color: #0E151D">{{item.renovate_begin_time}}-{{item.renovate_last_time}}</text>
					</view>
					<view style="display: flex;margin-top: 15px;color: #999999">
						装修类型：
						<text style="color: #0E151D">{{ item.renovate_type==1?"装修公司":"个人装修"}}</text>
					</view>
					<view style="display: flex;margin-top: 15px;color: #999999">
						申请时间：
						<text style="color: #0E151D">{{item.begin_time}}</text>
					</view>
				</view>
			</view>

		</view>


		<view class="add-process" @click="natov('/homePage/renovation/addRenovations')">
			<image style="width: 56px; height: 56px" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/tenAddDatas.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {

			return {
				homelist: {},

				index: 0,
				isActive: 0,
				housingFlag: false,
				hourseList: null,

				hourseNum: 0, //选择第几个房间,


				pageIndex: 1,

				renovate_state: 7,
				tableData: [], //获取装修记录


				chargeList: {},
				loading: false,
				// type: 1,
				nextPage: false,
				listData: [],
				radio: false,
				show: false,

				renovaStat: true,

			}
		},
		async onShow() {
			this.checkLogin();

		},
		onPullDownRefresh() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			console.log(this.homelist)
			this.housingFlag = false
		},
		methods: {
			// 验证是否登录或实名认证
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/my/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
								_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
							let res = this.$request.api.address({})
							this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]

							this.housingFlag = false

							this.renovation()
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/homePage1/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh();
			},
			async getrenovation() {
				let count = 0;
				let res = this.$request.api.renovation({
					room_id: this.homelist.roomId,
				}).then(res => {
					console.log(res)
					if (res.data.code == -1) {
						this.checked(1)
						this.isActive = 1
						this.renovaStat = false;
						this.renovation();
						if (count == 0) {
							count++;
							uni.showModal({
								title: '提示',
								content: '由于房间正在装修中只能查看装修记录！',
								showCancel: false,
								success: function success(res) {}
							});
						}

					}
				})
			},



			//获取装修记录
			async renovation() {
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				this.loading = false;
				let res = await this.$request.api.renovationList({
					pageIndex: this.pageIndex,
					room_id: this.homelist.roomId,
					ownerApp: 1,
				}).then(res => {
					console.log(res)
					let list = res.data.data.datalist || []
					for (var i = 0; i < list.length; i++) {
						let item = list[i];
						if (item.renovate_penal_sum) {
							let [renovate_penal_sum, renovate_penal_sum_type] = item.renovate_penal_sum.split(
								'-');
							renovate_penal_sum = Number(renovate_penal_sum);
							renovate_penal_sum_type = Number(renovate_penal_sum_type);
							item.renovate_penal_sum = renovate_penal_sum;
							item.renovate_penal_sum_type = renovate_penal_sum_type;
							console.log(item.renovate_penal_sum_type);
						}
						// 垃圾清运费
						if (item.renovate_garbage_clear) {
							let [renovate_garbage_clear, renovate_garbage_clear_type] = item
								.renovate_garbage_clear
								.split('-');
							renovate_garbage_clear = Number(renovate_garbage_clear);
							renovate_garbage_clear_type = Number(renovate_garbage_clear_type);
							item.renovate_garbage_clear = renovate_garbage_clear;
							item.renovate_garbage_clear_type = renovate_garbage_clear_type;
							console.log(item.renovate_garbage_clear_type)
						}
						// 装修管理费
						if (item.renovate_manage) {
							let [renovate_manage, renovate_manage_type] = item.renovate_manage.split('-');
							renovate_manage = Number(renovate_manage);
							renovate_manage_type = Number(renovate_manage_type);
							item.renovate_manage = renovate_manage
							item.renovate_manage_type = renovate_manage_type;
							console.log(item.renovate_manage_type)
						}
						// 其他费用
						if (item.renovate_other) {
							let [renovate_other, renovate_other_type] = item.renovate_other.split('-');
							renovate_other = Number(renovate_other);
							renovate_other_type = Number(renovate_other_type);
							item.renovate_other = renovate_other
							item.renovate_other_type = renovate_other_type
							console.log(item.renovate_other_type)
						}
						console.log(item)
					}
					this.tableData = list
					// if (this.pageIndex == 1) {
					// 	this.tableData = res.data.data.datalist || [];
					// } else {
					// 	this.tableData = [...this.tableData, ...res.data.data.datalist];
					// }
					console.log(this.tableData)
					this.nextPage = res.data.data.isEndPage
					this.loading = true;
					uni.hideLoading();
					// this.tableData = res.data.data.datalist
					// console.log(res)
				})
			},
			natov(url) {
				uni.navigateTo({
					url: url
				})
			},
			//页面跳转
			navTo(url, item) {
				let items = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: url + '?item=' + items
				});
			},
		}
	}
</script>
<style lang="scss">
	.input {
		width: 400rpx;
		text-align: left;
		line-height: 200%;

		.tab-type {
			width: 254rpx;
			height: 64rpx;
			border-radius: 6rpx 0rpx 0rpx 6rpx;
			border: 2rpx solid #578ef0;
			display: flex;
			align-items: center;
			justify-content: center;

			.shi {
				width: 126rpx;
				height: 60rpx;
				background: #4a90e2;
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
			}

			.fou {
				width: 126rpx;
				height: 60rpx;
				background: #ffffff;
				text-align: center;
				line-height: 60rpx;
				color: #4a90e2;
			}
		}
	}

	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #427705;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #427705;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.button {
		height: 35px;
		line-height: 35px;
		width: 28%;
		border-radius: 33px;
		border: 1px solid #CCCCCC;
		font-size: 15px;
	}

	.button1 {
		height: 40px;
		line-height: 40px;
		width: 80%;
		border-radius: 33px;
		color: #FFFFFF;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
	}

	// .button:hover{
	// 	border: 1px solid rgba(69, 124, 5, 0.1);
	// 	color: #447A05;
	// 	background:rgba(69, 124, 5, 0.1);
	// }
	.header-form {
		margin-top: 60rpx;
		background: #FFFFFF;

		.header-li {
			// padding:0 45rpx;
			display: flex;
			// align-items: center;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 95rpx;
			color: #333333;
			border-bottom: 1rpx solid #EEEEEE;

			.header-name {
				width: 200rpx;
			}

			.text-area {
				width: 420rpx;
				padding-top: 26rpx;
				height: 60rpx;
			}
		}
	}

	.guarn-box {
		width: 100%;
		height: 216rpx;

	}

	.guarn-box-img {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
		margin-left: 72rpx;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}

	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.foot_item {
		margin-top: 80rpx;
		height: 200rpx;
	}

	.button2 {
		width: 40%;
		height: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		float: left;
		margin-left: 33px;
		color: #427705;
		border: 1px solid #427705;
		background-color: #ffffff;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.button_in {
		width: 40%;
		height: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		float: right;
		color: #ffffff;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		margin-right: 34px;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.button_renovation {
		width: 31%;
		font-size: 10px;
		border-radius: 11px;
		border: 1px solid #2986FF;
		background-color: rgb(255, 255, 255);
		margin-right: 249px;
		color: #2986FF;
		margin-top: 20px;
	}

	.footers {
		width: 100%;
		background-color: #FFFFFF;
		height: 72px;
		position: fixed;
		bottom: 0px;
		left: 0px;
	}

	.footer {
		width: 95%;
		margin: 40rpx 20rpx;
		// position:fixed;
		// bottom:0px;
		// left:0px;
	}

	.footer-btn {
		// display: flex;
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 300rpx;
		float: right;
		text-align: center;
		background-color: #F9A832;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.details {
		color: #FFFFFF;

	}

	.button5 {
		position: relative;
		// left: 264rpx;
		top: -46rpx;
	}

	.payment {
		width: 50px;
		height: 50px;
		border: 1px solid #C0C0C0;
		border-radius: 12px;
	}

	.payment_img {
		width: 35px;
		margin-top: 10px;
		margin-left: 7px;
	}

	// .payment:hover{
	// 	border: 1px solid #F9A832;
	// 	 cursor : hand;
	// }
	.modal-bg {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.3);
	}

	.modal-cont {
		// height: 266rpx;
		background: #ffffff;
		// box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx 24rpx 0px 0rpx;
		position: fixed;
		height: 380rpx;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		overflow-x: hidden;
	}

	.modal-text {
		// font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #e6e9ed;
	}

	.modal-cancel {
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #578ef0;
	}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}

	.mian_content1 {
		background: #fff;
		padding: 80rpx 36rpx;
		margin-top: 22px;
		border-radius: 16px;
		display: flex;
		justify-content: space-between;
	}

	.mainpayment {
		padding: 10px;
		position: fixed;
		bottom: 52px;
		width: 100%;
	}

	.foot .footer {
		width: 95%;
		height: 128rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background: rgba(255, 255, 255, 1);
	}

	.button52 {
		text-align: center;
		background: linear-gradient(142deg, #42770591 0%, #427705FF 100%);
		color: #fff;
		padding: 7px 18px;
		border-radius: 8px;
		margin-right: 10px;
		margin-top: 15px;
	}

	.add-process {
		position: fixed;
		right: 36rpx;
		bottom: 230rpx;
	}
</style>